<template>
    <h3>基础语法示例</h3><br>
    <div>
     <p>{{ msg }}</p> 
     <p>{{ number }}</p>
     <p>{{ ok ? "YES":"NO" }}</p>
     <p>{{ htmlCode }}</p>
     <p v-html="htmlCode"></p>
     <p>{{ msg.split("").reverse().join("") }}</p>
     <p v-if="ok">OK = TRUE</p>
     <p><a v-bind:href="bdUrl">这是Hello</a></p>
     <p><button v-on:click="number++">数值+1</button>->{{number}}</p>
     <p><button v-on:[type]="number++">动态属性</button>->{{number}}</p>
   </div>
   </template>
   
   <script>
    export default {
     data(){
       return{
         msg: '神奇的语法',
         htmlCode: '<span style="color: red">这是红色的HTML字体</span>',
         number: 1,
         ok : true,
         bdUrl: "www.baidu.com",
         type:"click"
       }
     }
    }
   </script>